import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Drawer, Button, Spin } from 'antd'
import classNames from 'classnames'
import zh_CN from 'antd/lib/locale-provider/zh_CN'
import ConfigProvider from 'antd/lib/config-provider'

import './drawer.scss'

const UdDrawer = {
  open: (config: IDrawerProps) => {
    let states = { footer: true,padding:true, cancelText: '取消', okText: '确定', ...config, visible: true, loading: false } as any
    states.contentRef = React.createRef()
    if (!states.content.type.prototype) {
      console.error('Warning: you need to define component as class!')
    }
    states.content = React.cloneElement(states.content, { ref: states.contentRef })
    let drawerWrapper = document.createElement('div')
    states._id = drawerWrapper.id = '_' + Date.now()
    document.body.appendChild(drawerWrapper)
    render(states)
  },
}

function render(states: IDrawerProps) {
  let drawerWrapper = getWrapper(states._id)
  ReactDOM.render(
    <ConfigProvider locale={zh_CN}>
      <Drawer
        title={states.title || ' '}
        width={states.width}
        className={classNames('ud-drawer-view-wrapper', { 'no-footer': !states.footer })}
        destroyOnClose={true}
        onClose={handleClose.bind(this, states)}
        afterVisibleChange={afterVisibleChange.bind(this, states)}
        visible={states.visible}
      >
        <div className={classNames('ud-drawer-view-container', { 'no-padding': !states.padding })}>
          <div className={classNames(['ud-drawer-view-content', states.className])}>{states.content}</div>
        </div>
        {states.footer && (
          <div className="ud-drawer-view-footer">
            {states.cancelText && String(states.cancelText).length && (
              <Button type="default" onClick={handleClose.bind(this, states)}>
                {states.cancelText}
              </Button>
            )}
            <Button type="primary" onClick={handleOk.bind(this, states)} loading={states.loading}>
              {states.okText}
            </Button>
          </div>
        )}
      </Drawer>
    </ConfigProvider>,
    drawerWrapper
  )
}
function getWrapper(_id: string) {
  return document.getElementById(_id)
}
function afterVisibleChange(states) {
  if (!states.visible) {
    let drawerWrapper = getWrapper(states._id)
    drawerWrapper.parentNode.removeChild(drawerWrapper)
    drawerWrapper.remove()
    drawerWrapper = null
  }
}
function handleClose(states) {
  states = {
    ...states,
    visible: false,
  }
  render(states)
  states.onClose && typeof states.onClose == 'function' && states.onClose()
}
function handleOk(states) {
  const node = getNode(states)
  node &&
    typeof node.onOk == 'function' &&
    node.onOk({
      close: handleHide.bind(null, states),
      drawerBtnLoading: showLoading.bind(null, states),
      drawerBtnLoadingHide: hideLoading.bind(null, states),
    })
}
function getNode(states) {
  return states.contentRef.current
}

function handleHide(states) {
  states = {
    ...states,
    visible: false,
    loading: false,
  }
  render(states)
  states.onSubmit && typeof states.onSubmit == 'function' && states.onSubmit()
}

function showLoading(states) {
  states = {
    ...states,
    loading: true,
  }
  render(states)
}

function hideLoading(states) {
  states = {
    ...states,
    loading: false,
  }
  render(states)
}

export interface IDrawerProps {
  title?: string
  content: React.ReactNode
  className?: string
  padding?: boolean
  visible?: boolean
  width?: number | string
  keyboard?: boolean
  footer?: boolean | React.ReactNode
  cancelText?: string
  okText?: string
  onClose?: (...args: any[]) => void
  _id?: string
  loading?: boolean
  onSubmit?: (...args: any[]) => void
}

export default UdDrawer
